<template>
    <div id="myNav">
        <!-- 导航1 -->
        <ul class="clearfix">
            <li><router-link to='/'>网站首页</router-link></li>
            <li><router-link :to="{path:'/product',query:{currentPageName:'产品介绍'}}">产品介绍</router-link></li>
            <li>
                <van-dropdown-menu active-color="#3460f2">
                    <van-dropdown-item v-model="value1" :title="title" :options="array" @change="selectItem" />
                </van-dropdown-menu>
            </li>
            <li><router-link :to="{path:'/new',query:{currentPageName:'新闻中心'}}">新闻中心</router-link></li>
            <li><router-link :to="{path:'/online',query:{currentPageName:'在线留言'}}">在线留言</router-link></li>
            <li><router-link :to="{path:'/about',query:{currentPageName:'关于我们'}}">关于我们</router-link></li>
        </ul>
        <div v-if="twoMenu">
            <!-- 导航2 -->
            <van-nav-bar>
                <template #left>
                    <div class="twoNav iconRotate" @click="goBack">
                        <van-icon name="share" color="#fff" />
                    </div>
                </template>
                <template #right>
                    <div class="twoNav" @click="toHome">
                        <van-icon name="wap-home" color="#fff" />
                    </div>
                    <div class="twoNav menu" @click="showChild">
                        <van-icon name="bars" color="#fff" />
                    </div>
                </template>
            </van-nav-bar>
            <div class="collapse">
                <collapse>
                    <ul v-show="isActive">
                        <li> <router-link to='/'> 网站首页 </router-link></li>
                        <li> <router-link :to="{path:'/about',query:{currentPageName:'关于我们'}}"> 关于我们 </router-link></li>
                        <li> <router-link :to="{path:'/product',query:{currentPageName:'产品介绍'}}"> 产品介绍 </router-link></li>
                        <li> <router-link to='/'> 合作伙伴 </router-link></li>
                        <li> <router-link :to="{path:'/honor',query:{currentPageName:'荣誉资质'}}"> 荣誉资质 </router-link></li>
                        <li> <router-link to='/'> 商家入驻 </router-link></li>
                        <li> <router-link to='/'> 软件销售 </router-link></li>
                        <li> <router-link :to="{path:'/new',query:{currentPageName:'新闻中心'}}"> 新闻中心 </router-link></li>
                        <li> <router-link :to="{path:'/online',query:{currentPageName:'在线留言'}}"> 在线留言 </router-link></li>
                        <li> <router-link :to="{path:'/about',query:{currentPageName:'关于我们'}}"> 联系我们 </router-link></li>
                    </ul>
                </collapse>
            </div>
            <!-- 位置 -->
            <div class="path">
                当前位置：首页<van-icon name="arrow" /> <van-icon name="minus" /> <van-icon name="arrow" /> {{currentPageName}} <van-icon name="minus" v-if="currentChild"/> <van-icon name="arrow" v-if="currentChild"/> {{ currentChild ? currentChild : '' }}
            </div>
        </div>
    </div>
</template>

<script>
import { DropdownMenu, DropdownItem,NavBar,Icon } from 'vant';
import collapse  from '@/assets/js/collapse.js';
export default {
    name:'myNav',
    components:{
        'van-dropdown-menu':DropdownMenu,
        'van-dropdown-item':DropdownItem,
        'van-nav-bar':NavBar,
        'van-icon':Icon,
        collapse
    },
    props:{
        twoMenu:{
            type:Boolean,
            default:false,
        }
    },
    data(){
        return{
            // value1:this.$store.getters.value1,
            title: '软件合作',
            array:[
                { text: '医护上门软件', value: 0 },
                { text: '医院陪护软件', value: 1 },
                { text: '家政服务软件', value: 2 },
            ],
            isActive:false,
            currentPageName:'',
            currentChild:''
        }
    },
    computed:{
        value1:{
            get(){
                return this.$store.getters.value1
            },
            set(value){
                return value
            }
        }
    },
    methods: {
        selectItem(value){
            this.title = this.array[value].text
            this.$store.commit('changeVaule',value)
            this.$router.push({
                path:'/other',
                query:{
                    title:value,
                    currentPageName:'软件介绍',
                    currentChild:this.title
                }
            })
        },
        showChild(){
            this.isActive = !this.isActive
        },
        toHome(){
            this.$router.push('/')
        },
        goBack(){
            this.$router.back()
        }
    },
    mounted(){
        let index = this.$route.query.title || null
        this.title = index ? this.array[index].text : '软件合作' 
        this.currentPageName = this.$route.query.currentPageName || ''
        this.currentChild = this.$route.query.currentChild || ''
    }
}
</script>

<style lang="scss" scoped>
ul{
    li{
        display:block;
        background-color: #3460f2;
        width: 125px;
        line-height:48px;
        float:left;
        color:#fff;
        text-align:center;
        border-bottom: 1px solid #fff;
        cursor:pointer;
        position: relative;
        &::after{
            content:'';
            display:inline-block;
            width: 1px;
            background-color: #555;
            height:48px;
            vertical-align: middle;
            position: absolute;
            right:0;
        }
        &:nth-child(3),&:nth-child(6){
            border-right: none;
        }

        ::v-deep .van-dropdown-menu__item{
            background-color:#3460f2;
        }
        ::v-deep .van-dropdown-menu__title{
            color:#fff !important;
        }
        a{
            color:#fff;
        }
    }
}
.twoNav{
    width: 20px;
    height: 20px;
    padding:6px;
    background-color: #3460f2;
    border-radius: 6px;
    margin-right: 6px;
    ::v-deep .van-icon{
        font-size:16px
    }
}
.menu{
    margin-right: 0px;
    position: relative;
}
::v-deep .van-nav-bar{
    background-color:#eee;
}
.iconRotate{
    transform: rotateY(180deg);
}
.path{
    font-size:12px;
    padding: 10px;
    background-color:#3460f2;
    color:#fff;
}
.collapse{
    position: absolute;
    width:100%;
    z-index:9;
    ul{
        li{
            width: 100%;
            display:block;
            background-color: #474747;
            a{
                display:block;
            }
        }
    }
}
</style>